<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #loginDiv{
            border: 1px solid red;

        }
        #contextDiv{
            border: 1px solid black;
            width: 600px;
            height: 700px;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>

</head>
<body>
<!--asdfas-->
<div id="loginDiv">
    用户名：<input type="text" name="user_name" id="user_name" value="张三">
    密码：<input type="password" name="user_password" id="user_password" value="123">
    <input type="button" id="btu" value="登录">
</div>
<br/>
<br/>
<br/>
<div id="contextDiv">
    hello world!
    <input type="text" id="search" size="50" placeholder="请输入关键字">
</div>
<script>
    $(function () {
        $("#btu").click(function () {
            $.ajax({
                type:'POST',
                url:'/userJsonLogin.do',
                data:{
                    user_name:$("#user_name").val(),
                    user_password:$("#user_password").val()
                },
                success:function (result) {
                    $("#loginDiv").html("欢迎你，"+result.user_name+"，登陆成功！")
                }
            })
        })
    })
</script>
</body>
</html>